<template>
  <div class="inventory-record">
    <!-- 筛选栏 -->
    <el-form :inline="true" :model="filters" class="filter-form">
      <el-form-item label="商品名称">
        <el-input
          v-model="filters.productName"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>
      <el-form-item label="操作时间">
        <el-date-picker
          v-model="filters.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="订单号">
        <el-input
          v-model="filters.orderNo"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>
      <el-form-item label="操作人">
        <el-input
          v-model="filters.operator"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>
      <el-form-item label="操作类型">
        <el-select v-model="filters.type" placeholder="全部" clearable>
          <el-option label="全部" value="" />
          <el-option label="生成订单" value="生成订单" />
          <el-option label="编辑订单" value="编辑订单" />
          <el-option label="采购入库" value="采购入库" />
          <el-option label="退货入库" value="退货入库" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button type="danger" @click="onExport">导出</el-button>
      </el-form-item>
    </el-form>

    <!-- tab切换 -->
    <el-tabs v-model="activeTab" class="tab-bar">
      <el-tab-pane label="商品出库" name="out" />
      <el-tab-pane label="商品入库" name="in" />
    </el-tabs>

    <!-- 表格 -->
    <el-table :data="pagedData" border style="width: 100%">
      <el-table-column prop="productId" label="商品ID" width="140" />
      <el-table-column
        :prop="activeTab === 'out' ? 'outTime' : 'inTime'"
        :label="activeTab === 'out' ? '出库时间' : '入库时间'"
        width="180"
      />
      <el-table-column prop="productName" label="商品名称" />
      <el-table-column
        :prop="activeTab === 'out' ? 'outType' : 'inType'"
        :label="activeTab === 'out' ? '出库类型' : '入库类型'"
        width="120"
      />
      <el-table-column prop="orderNo" label="订单号" width="140" />
      <el-table-column
        :prop="activeTab === 'out' ? 'outNum' : 'inNum'"
        :label="activeTab === 'out' ? '出库数量' : '入库数量'"
        width="100"
      />
      <el-table-column prop="stock" label="剩余库存" width="100" />
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="filteredData.length"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="onPageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const outRecords = ref([
  {
    productId: "20200200003",
    outTime: "2020-02-14 14:30:30",
    productName: "电动牙刷",
    outType: "生成订单",
    orderNo: "1200010010",
    outNum: 100,
    stock: 100,
    operator: "张三",
  },
  {
    productId: "20200200003",
    outTime: "2020-02-14 14:30:30",
    productName: "电动牙刷",
    outType: "编辑订单",
    orderNo: "-",
    outNum: 100,
    stock: 100,
    operator: "李四",
  },
  {
    productId: "20200200003",
    outTime: "2020-02-14 14:30:30",
    productName: "电动牙刷",
    outType: "生成订单",
    orderNo: "1200010010",
    outNum: 100,
    stock: 100,
    operator: "王五",
  },
  {
    productId: "20200200003",
    outTime: "2020-02-14 14:30:30",
    productName: "电动牙刷",
    outType: "编辑订单",
    orderNo: "-",
    outNum: 100,
    stock: 100,
    operator: "赵六",
  },
]);

const inRecords = ref([
  {
    productId: "20200200003",
    inTime: "2020-02-14 14:30:30",
    productName: "电动牙刷",
    inType: "采购入库",
    orderNo: "1200010010",
    inNum: 100,
    stock: 100,
    operator: "张三",
  },
  {
    productId: "20200200003",
    inTime: "2020-02-14 14:30:30",
    productName: "电动牙刷",
    inType: "退货入库",
    orderNo: "-",
    inNum: 100,
    stock: 100,
    operator: "李四",
  },
  {
    productId: "20200200003",
    inTime: "2020-02-14 14:30:30",
    productName: "电动牙刷",
    inType: "采购入库",
    orderNo: "1200010010",
    inNum: 100,
    stock: 100,
    operator: "王五",
  },
  {
    productId: "20200200003",
    inTime: "2020-02-14 14:30:30",
    productName: "电动牙刷",
    inType: "退货入库",
    orderNo: "-",
    inNum: 100,
    stock: 100,
    operator: "赵六",
  },
]);

const filters = ref({
  productName: "",
  dateRange: [],
  orderNo: "",
  operator: "",
  type: "",
});

const activeTab = ref("out");
const currentPage = ref(1);
const pageSize = 4;

const filteredData = computed(() => {
  let data = activeTab.value === "out" ? outRecords.value : inRecords.value;
  if (filters.value.productName) {
    data = data.filter((r) =>
      r.productName.includes(filters.value.productName)
    );
  }
  if (filters.value.orderNo) {
    data = data.filter((r) => r.orderNo.includes(filters.value.orderNo));
  }
  if (filters.value.operator) {
    data = data.filter((r) => r.operator.includes(filters.value.operator));
  }
  if (filters.value.type) {
    if (activeTab.value === "out") {
      data = data.filter((r) => r.outType === filters.value.type);
    } else {
      data = data.filter((r) => r.inType === filters.value.type);
    }
  }
  if (filters.value.dateRange && filters.value.dateRange.length === 2) {
    const [start, end] = filters.value.dateRange;
    data = data.filter((r) => {
      const time = new Date(activeTab.value === "out" ? r.outTime : r.inTime);
      return time >= new Date(start) && time <= new Date(end);
    });
  }
  return data;
});

const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  return filteredData.value.slice(start, start + pageSize);
});

function onSearch() {
  currentPage.value = 1;
}
function onReset() {
  filters.value = {
    productName: "",
    dateRange: [],
    orderNo: "",
    operator: "",
    type: "",
  };
  currentPage.value = 1;
}
function onExport() {
  alert("导出功能待实现");
}
function onPageChange(page) {
  currentPage.value = page;
}
</script>

<style scoped>
.inventory-record {
  padding: 24px;
}
.filter-form {
  margin-bottom: 16px;
}
.tab-bar {
  margin-bottom: 16px;
}
.pagination-wrapper {
  margin-top: 16px;
  text-align: right;
}
</style>